{% extends 'mobile/base.html' %}

{% set title = _('Help other users') %}
{% set headline = title %}

{% set styles = ('mobile-landings-get-involved',) %}

{% set canonical_url = canonicalize(viewname='landings.get_involved') %}

{% block content %}
  <div class="padded">
    <h3>{{ _('Save the world from the comfort of your couch') }}</h3>

    <div class="centered">
      <img class="smart-width" src="{{ STATIC_URL }}sumo/img/gi-hero-butler.png" alt="">
    </div>

    <h4>{{ _('We need your help!') }}</h4>
    <p>
      {% trans %}
        Used by more than 400 million people, Mozilla support is fully powered by
        volunteers, and it’s more important than ever. This is where you come in.
      {% endtrans %}
    </p>

    <h4>{{ _('Why should I help?') }}</h4>
    <p>
      {% trans %}
        Help millions of users get the most out of their favourite
        browser. Your contributions will reach millions of users worldwide, and
        you can do it from the comfort of your couch!
      {% endtrans %}
    </p>
  </div>

  <div class="pick-a-way">
    <div class="padded">
      <h4>{{ _('Pick a way to get involved') }}</h4>
    </div>

    <ul class="gi-links">
      <li>
        <a href="{{ url('landings.get_involved_questions') }}">
          {{ _('Answer questions in the support forum') }}
        </a>
      </li>
      <li>
        <a href="{{ url('landings.get_involved_kb') }}">
          {{ _('Write help articles') }}
        </a>
      </li>
      <li>
        <a href="{{ url('landings.get_involved_l10n') }}">
          {{ _('Translate help to your languages') }}
        </a>
      </li>
    </ul>
  </div>

  <div class="padded">
    <div class="centered about-banner">
      <img class="smart-width" src="{{ STATIC_URL }}sumo/img/moz-heroes.jpg" alt="">
    </div>

    <h4>{{ _('About Us') }}</h4>
    <p>
      {% trans %}
        Mozilla Support is a community of enthusiastic volunteers and employees
        trying to support our users around the globe. Join us for an incredible
        adventure!
      {% endtrans %}
    </p>
  </div>

  <div class="sign-up">
    <h3>
      {{ _('Having trouble with a Mozilla product and want some help?') }}
    </h3>
    <a class="btn btn-submit" href="{{ url('questions.aaq_step1') }}">
      {{ _('Ask a question') }}
    </a>
  </div>
{% endblock %}
